<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="myh1"></h1>

    <script>
      // 关键词
      const kw = 'JS'
      // 待处理的字符串
      const str = 'JS ArrayBuffer Js about js'

      // const newStr = str.replace('js', 'javascript')
      
      // 下面的方式表示：
      // 把正则表达式匹配到的内容，替换为第二个参数对应的字符串
      // i 是正则的修饰符，表示：在匹配的时候忽略大小写
      // g 是正则的修饰符，表示：全局匹配

      // 如果直接使用 // 去声明正则的话，缺点是：无法动态提供要匹配的内容，
      // 此时可以使用 new RegExp() 来动态创建正则表达式
      // new RegExp('要匹配的内容', '修饰符')
      // const newStr = str.replace(/js/ig, 'javascript')

      // const reg = new RegExp(kw, 'ig')
      // const newStr = str.replace(reg, 'javascript')

      const reg = new RegExp(kw, 'ig')
      // 如果在调用 replace 方法的时候，直接为第二个参数提供了字符串，则无法拿到正则匹配到的原装字符串
      // const newStr = str.replace(reg, `<span style="color: red; font-weight: bold;">${kw}</span>`)

      const newStr = str.replace(reg, (val) => {
        // 如果要实现高亮效果，就是在原内容之外，包裹一个高亮的 span 标签即可
        return `<span style="color: red;">${val}</span>`
      })

      document.querySelector('#myh1').innerHTML = newStr
    </script>
  </body>
</html>
